<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>
<style>
  .public {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: black;
  }

  .color {
    font-size: 20px;
    color: chartreuse;
  }

  .active {
    background-color: cornflowerblue;
  }

  .noactive {
    background-color: chocolate;
  }

  .orangered {
    color: orangered;
  }

  .bold {
    font-weight: bold;
  }

  .italic {
    font-style: italic;
  }
</style>

<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <!-- 1.动态class:值是一个字符串
        用法：类名一般只有一个并且不确定是哪一个
    -->
    <p class="public" :class="fontcolor">Hey</p>
    <p class="public" :class="active?'active':'noactive'">Vue</p>
    <!--2. 动态class:值是一个对象,对象的key都是class的名称 值为布尔值，通过布尔值控制当前名称是否使用
     用法：类固定，但是不确定是否使用
    -->
    <p class="public" :class="fontstyle">20点11分</p>
    <p class="public" :class="{orangered:isorangered,bold:isbold,italic:isitalic}">20点17分</p>
    <!-- 3.动态class:值是一个数组
          用法：类型个数不固定，可以操作数组，对类名进行增删改
    -->
    <p class="public" :class="fontstyle1">20点19分</p>
  </div>
  <script>
    Vue.config.productionTip = false;
    const vm = new Vue({
      el: "#app",
      data: {
        msg: "hello vue!",
        fontcolor: 'color',
        active: true,
        // 值为对象时
        fontstyle: {
          orangered: true,
          bold: true,
          italic: true,
        },
        isorangered: true,
        isbold: true,
        isitalic: false,
        //值为数组时
        fontstyle1: ['orangered']
      }
    })
  </script>
</body>

</html>